<template>
  <div>
    <div class="main">
      <div class="options_tab">
        <span style="margin-right:25px;">年份：</span>
        <el-date-picker
          v-model="year"
          size="mini"
          type="year"
          placeholder="选择年">
        </el-date-picker>
        <span style="margin-left:50px;margin-right:5px;">上报状态：</span>
        <el-select v-model="value" style="width:120px" size="mini" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <we-button style="margin: 0 50px;" type="primary" size="small"
          ><em class="el-icon-plus"></em> 查询
        </we-button>
        <we-button type="primary" size="small"
          ><em class="el-icon-delete-solid"></em> 重置
        </we-button>
      </div>

      <div>
      <el-table
        size="mini"
        ref="table"
        :header-cell-style="rowClass"
        :data="tableData"
        class="customer-no-border-table"
        style="width:90%;margin-bottom: 20px;margin-left:50px;"
        row-key="id"
        default-expand-all
        @selection-change="handleSelectionChange"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="date"
          label="年度"
          >
        </el-table-column>
        <el-table-column
          prop="name"
          label="单位名称"
          >
        </el-table-column>
        <el-table-column
          prop="address"
          label="上报状态"
          >
          <template scope="scope">
            <span v-if="scope.row.address==='已接收'" style="color:#70B603">已接收</span>
            <span v-else-if="scope.row.address==='未上报'" style="color:#D9001B">未上报</span>
            <span v-else style="color:#F59A23">{{scope.row.address}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="time"
          label="上报时间"
          >
        </el-table-column>
        <!-- <el-table-column label="操作" width="180">
          <template>
            <span style="color:#409eff;margin-right:80px;">提醒</span>
            <span style="color:#AAAAAA;">查看</span>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    </div>
  </div>
</template>

<script>
import WeButton from '@/components/WeButton'
// import { parseTree } from '@/utils/util'
// import { getAction, postAction, deleteAction } from '@/api/manage'
export default {
  components: {
    WeButton
  },
  data () {
    return {
      options: [{
        value: '选项1',
        label: '已接收'
      }, {
        value: '选项2',
        label: '未接收'
      }, {
        value: '选项3',
        label: '已退回'
      }],
      value: '',
      year: '',
      tableData: [{
        id: 1,
        date: '2020年',
        name: '水利部',
        address: '已接收',
        time: '2020-03-12  12:34',
        children: [{
          id: 31,
          date: '2020年',
          name: '黄河水利委员会',
          address: '待接收',
          time: '2020-03-12  12:34'
        }, {
          id: 32,
          date: '2020年',
          name: '黄河水利委员会',
          address: '未上报',
          time: '2020-03-12  12:34'
        }, {
          id: 33,
          date: '2020年',
          name: '长江水利委员会',
          address: '已退回',
          time: '2020-03-12  12:34'
        }, {
          id: 34,
          date: '2020年',
          name: '长江水利委员会',
          address: '未上报',
          time: '2020-03-12  12:34'
        }]
      }],
      multipleSelection: []
    }
  },

  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },

    rowClass ({ row, rowIndex }) {
      return 'background:rgba(242, 242, 242, 1);color:#000;'
    }
  }
}
</script>

<style scoped>
html, body, div {
  font-size: 14px;
  box-sizing: border-box;
}
.main {
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 3px;
}
.options_tab {
  margin: 30px 0 30px 50px;
}
/*去掉表格单元格边框*/

</style>
